<!DOCTYPE html>
<html class="x-admin-sm" lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>
        人岗匹配日志
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/assets/admin/css/font.css}">
    <link rel="stylesheet" th:href="@{/assets/admin/css/xadmin.css}">
    <script th:src="@{/assets/admin/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/assets/admin/js/xadmin.js}"></script>
    <script th:src="@{/assets/admin/lib/xm-select.js}" charset="utf-8"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<style type="text/css">
    .layui-form-switch{
        margin-top: 5px;
    }
    .input-tar{
        float: left;
        font-size: 10px;
        padding: 3px 4px;
        margin-right: 4px;
        margin-top: 6px;
        border-radius: 2px;
        line-height: 13px;
        color: #fff;
    }
</style>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">日志</a>
            <a><cite>人岗匹配日志</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5" action="" lay-filter="log_sreach_form">
                        <div class="layui-inline">
                            <label class="layui-form-label">拉线</label>
                            <div class="layui-input-inline" style="width: 195px;">
                                <div id="lineSelect" class="xm-select-demo" sub-name="productionLine"></div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">操作-开始时间</label>
                            <div class="layui-input-inline" style="width: 195px;">
                                <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">操作-结束时间</label>
                            <div class="layui-input-inline" style="width: 195px;">
                                <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">匹配类型</label>
                            <div class="layui-input-inline" style="width: 195px;">
                                <input type="checkbox" name="force" lay-skin="switch" lay-text="强制|普通">
                            </div>
                        </div>
                        <br/>
                        <div style="text-align: center">
                            <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="sreach">
                                <i class="layui-icon">&#xe615;</i>搜索
                            </button>
                            <button type="button" class="layui-btn layui-btn-danger" lay-submit lay-filter="settings">
                                <i class="layui-icon">&#xe716;</i>基础设置
                            </button>
                            <button type="button" class="layui-btn layui-btn-warm" lay-submit lay-filter="export">
                                <i class="layui-icon">&#xe67d;</i>导出
                            </button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-table layui-form" id="table1">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script th:src="@{/assets/admin/js/jquery.min.js}"></script>
<script th:replace="systemCommon/HarinCommon :: commonJs"></script>
<script>
    var lineSelect;
    let tarBgc = ["#FF5722","#FFB800","#009688","#2F4056","#1E9FFF" ,"#393D49"];
    $(function () {
        lineSelect = xmSelect.render({
            el: '#lineSelect',
            radio: true, //单选
            clickClose: true,//选择后关闭
            filterable: true,
            repeat: false, //是否允许重复选择 关闭
            searchTips: '请输入你搜索的拉线？',//搜索标题
            paging: true, //开启分页
            pageSize: 5,  //每页展示5条数据
            autoRow: true, //自动换行
            toolbar: {  //展示工具
                show: true,
                list: [ 'ALL', 'CLEAR', 'REVERSE' ]
            },
            theme: { //选中的主题颜色
                color: '#1cbbb4',
            },
            show(){
                //let find = $("#deliveryBusName").find("xm-select").find(".xm-body").find(".scroll-body").find(".xm-option:first").focus();
            },
            on: function(data){
                console.log($(this));
            },
            prop: {     //name 和value的取值
                name: 'lineName',
                value: 'lineName'
            },
            size: 'medium', //
            data: []
        });
        getData();

        layui.use(['laydate', 'form','table'], function () {
            laydate = layui.laydate;
            form = layui.form;
            table = layui.table;

            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });


            //第一个实例
            matchLogTable = table.render({
                id:"in_reconciliation_table",
                elem: '#table1',
                url: '/log/matching/getMatchLogByPage', //数据接口
                method: "get",
                // contentType: "applycation/json;charset=utf-8",
                where: {     //请求参数
                    "start": $("#start").val(),
                    "end": $("#end").val()
                },
                parseData: function (res) { //res 即为原始返回的数据
                    var data = res.result;
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": data.total, //解析数据长度
                        "data": data.records //解析数据列表
                    };
                },
                request:{
                    pageName:"pageNum",
                    limitName:"pageSize"
                },
                response: {//重新定义规则
                    //statusName: 'status', //规定数据状态的字段名称，默认：code
                    statusCode: 200, //规定成功的状态码，默认：0
                    //msgName: 'hint', //规定状态信息的字段名称，默认：msg
                    //countName: 'total', //规定数据总数的字段名称，默认：count
                    //dataName: 'rows' //规定数据列表的字段名称，默认：data
                },
                page: true, //开启分页
                limits: [10, 20, 50],//可选条目数
                toolbar: ['filter'],//若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数
                loading: true, //加载动画
                jump: function(e,t){
                  //console.log(e);
                },
                cols: [
                    [ //表头
                        {type:'checkbox', fixed: 'left'},
                        {field: 'id', title: 'ID', sort: true, fixed: 'left', width:80,unresize:true},
                        {field: 'productionLine',title:'拉线',width: 120,templet:function(data){
                                return data.paramList[0].sopSkill.productionLine;
                            }
                        },
                        {field: 'employeeName',title:'人员姓名',width: 120,templet:function(data){
                                return data.paramList[0].personJob.employeeName;
                            }
                        },
                        {field: 'employeeNumber',title:'工号',width: 120,templet:function(data){
                                return data.paramList[0].personJob.employeeNumber;
                            }
                        },
                        {field: 'procedureName',title:'岗位',width: 120,templet:function(data){
                                return data.paramList[0].sopSkill.procedureName;
                            }
                        },
                        {field: 'skills',title:'人员技能',width: 200,templet:function(data){
                                //return data.paramList[0].sopSkill.skills.join(",");
                                let skills = data.paramList[0].sopSkill.skills;
                                let result = "";
                                for (let i=0;i< skills.length ; i++){
                                    // let gbcIndex =  i% tarBgc.length;
                                    let gbcIndex = Math.floor(Math.random() * tarBgc.length);

                                    result += "<span class='input-tar' style='background-color:"+tarBgc[gbcIndex]+"'>"+skills[i]+"</span>"
                                }
                                return result;
                            }
                        },
                        {field: 'postType',title:'岗位类型',width: 120,templet:function(data){
                                let postType = data.paramList[0].sopSkill.postType;
                                if(postType == 1){
                                    return "<div><span style='color:green'>普通岗位</span></div>";
                                }else if(postType == 2){
                                    return "<div><span style='color:red;font-weight: bold'>关键岗位</span></div>";
                                }
                                return "";
                            }
                        },
                        {field: 'message',title:'匹配结果',width: 120,templet:function(data){
                                let message = data.result.message;
                                if(message == "强制匹配成功！"){
                                    return "强制匹配";
                                }
                                let success = data.result.success;
                                return success?"匹配成功":"匹配失败";
                            }
                        },
                        {field: 'paramList',hide:true, title: '参数',templet:function(data){
                                let paramList = data["paramList"];
                                return JSON.stringify(paramList);
                            }
                        },
                        {field: 'result',hide:true, title: '匹配结果',templet:function(data){
                                let result = data["result"];
                                return JSON.stringify(result);
                            }
                        },
                        {field: 'mesResponse', title: 'MES是否已记录' , width:120},
                        {field: 'createTime', title: '操作时间', width:200, templet : "<div>{{layui.util.toDateString(d.createTime, 'yyyy年MM月dd日 HH:mm:ss')}}</div>"},
                    ]
                ]
            });

            form.on('submit(sreach)',function(obj){
                let value = lineSelect.getValue();
                let lineName = null;
                if(!isEmpty(value)) {
                    lineName = value[0]["lineName"];
                }
                matchLogTable.reload({
                    where : {
                        "start": $("#start").val(),
                        "end": $("#end").val(),
                        "force": obj.field.force == 'on',
                        "productionLine": isEmpty(lineName)?"":lineName
                    },
                    //每次搜索，跳转到第一页。如果不加，每次查询都是上次所在页面，很有可能没有这么多页。导致不加载
                    page:{
                        curr:1
                    }
                });
            });

            form.on('submit(settings)',function(obj){
               openLayer('强制匹配日志推送配置','/busnissSetting/setting/MACTH_LOG',725,600,false,null);
            });

            form.on('submit(export)',function(obj){
                console.log(obj.field.force);
                let value = lineSelect.getValue();
                let requestData = {};
                if(!isEmpty(value)) {
                    requestData["productionLine"] = value[0]["lineName"];
                }
                requestData["force"] = (obj.field.force == 'on');
                requestData["start"] = obj.field.start;
                requestData["end"] = obj.field.end;
                window.location.href = "/log/matching/exportLog?"+json_to_get(JSON.stringify(requestData));
            });

            //监听复选框事件，被选中的行高亮显示
            table.on('checkbox(in_reconciliation_table)', function (obj) {
                if (obj.checked == true && obj.type == 'all') {
                    //点击全选
                    $('.layui-table-body table.layui-table tbody tr').addClass('layui-table-click');
                } else if (obj.checked == false && obj.type == 'all'){
                    //点击全不选
                    $('.layui-table-body table.layui-table tbody tr').removeClass('layui-table-click');
                } else if (obj.checked == true && obj.type == 'one'){
                    //点击单行
                    if (obj.checked == true) {
                        obj.tr.addClass('layui-table-click');
                    } else {
                        obj.tr.removeClass('layui-table-click');
                    }
                } else if (obj.checked == false && obj.type == 'one') {
                    //点击全选之后点击单行
                    if (obj.tr.hasClass('layui-table-click')) {
                        obj.tr.removeClass('layui-table-click');
                    }
                }
            });

        });
        //点击行checkbox选中  layui的table单击高亮显示
        $(document).on("click", ".layui-table-body table.layui-table tbody tr", function() {
            var index = $(this).attr('data-index');
            var tableBox = $(this).parents('.layui-table-box');
            //存在固定列
            if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length > 0) {
                tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
            } else {
                tableDiv = tableBox.find(".layui-table-body.layui-table-main");
            }
            var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
            if (checkCell.length > 0) {
                checkCell.click();
            }
        });

        $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function(e) {
            e.stopPropagation();
        });
    });

    //批量删除提交
    function delAll() {
        layer.confirm('确认要删除吗？', function (index) {
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
        });
    }


    function getData() {
        $.ajax({
            url: "/line/findAll",
            type: "get",
            success: function (data) {
                lineSelect.update({
                    data: data.result
                })
            }
        });
    }
</script>
</html>